<template>
  <div class="login_container">
    <a-card title="登录账号" :bordered="true" style="width: 300px;margin:0 auto;position: absolute;transform: translate3d(-50%,-50%,0);
    top:50%;left:50%;background: #f9f9f9;">
      <a @click="$router.push({name: 'Register'})" slot="extra">注册</a><a-form
      id="components-form-demo-normal-login"
      :form="form"
      class="login-form"
      @submit="handleSubmit"
    >
      <a-form-item>
        <a-input
          v-decorator="[
          'name',
          { rules: [{ required: true, message: 'Please input your username!' }] }
        ]"
          placeholder="用户名"
        >
          <a-icon
            slot="prefix"
            type="user"
            style="color: rgba(0,0,0,.25)"
          />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          v-decorator="[
          'password',
          { rules: [{ required: true, message: 'Please input your Password!' }] }
        ]"
          type="password"
          placeholder="密码"
        >
          <a-icon
            slot="prefix"
            type="lock"
            style="color: rgba(0,0,0,.25)"
          />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button
          type="primary"
          html-type="submit"
          class="login-form-button"
        >
          登录
        </a-button>
      </a-form-item>
    </a-form>
    </a-card>
  </div>
</template>

<script>
export default {
  name: 'Login',
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  data () {
    return {

    }
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
        }
        this.login(values)
      })
    },
    login (values) {
      this.$axios.post('/users/login', values).then(res => {
        console.log(res);
        let data = res.data;
        if(data.ok){
          this.$message.success('登录成功',1, () => {
            this.$store.dispatch("userLogin", data.ok);
            this.$store.dispatch("userRecord", data.name);
            this.$store.dispatch("userIdRecord", data.id);
            localStorage.setItem("Flag", "isLogin");
            this.$router.push({name: 'HomePage'})
          })

        }else{
          this.$message.error('登录失败',1, () => {

          })
        }
      }).catch(err =>{
        console.error(err)
      });

    }
  },
  mounted () {
    $('.login_container').jParticle({
      background: 'rgba(2,5,31,1)',
      color: 'rgb(17,60,119)',
      particlesNumber: 250,
      particle: {
        minSize: 1,
        maxSize: 3,
        speed: 30
      }
    })
  }
}
</script>

<style lang="less">
html,body{
  width: 100%;
  height: 100%;
  margin: 0;
}
.login_container{
  width: 100%;
  height: 100%;
}
</style>
